<template>
  <div>
    <!-- 渲染树形数据的时候，必须要制定row-key -->
     <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"   
    border
    :expand-row-keys="['1']"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="name"
      label="名称"
      width="180">
    </el-table-column>  
    <el-table-column
      prop="code"
      label="权限值"
      width="180">
    </el-table-column>
    <el-table-column
      prop="toCode"
      label="跳转权限值">
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="{row,$index}">
        <HintButton @click="handleAdd(row)" :disabled="row.level >=3" icon="el-icon-plus" type="primary" style="margin-right:10px;" size="mini"  />
        <HintButton icon="el-icon-edit" :disabled="row.level == 1" type="primary" style="margin-right:10px;" size="mini"/>
        <HintButton icon="el-icon-delete" :disabled="row.level == 1" type="danger" style="margin-right:10px;" size="mini"/>
      </template>
    </el-table-column>
  </el-table>

  <!-- dialog对话框 -->
  <el-dialog :title="`添加${mnForm.level}级菜单`"  :visible.sync="dialogFormVisible">
  <el-form :model="mnForm" ref="ruleForm" :rules="rules">
    <el-form-item label="父级名称" label-width="110px" v-show="mnForm.level != '一'">
      <el-input v-model="mnForm.fartherTitle"  disabled ></el-input>
    </el-form-item>
    <el-form-item label="名称"  label-width="110px" prop="name">
      <el-input v-model="mnForm.name"></el-input>
    </el-form-item>
    <el-form-item label="功能权限值" label-width="110px" prop="code">
      <el-input  v-model="mnForm.code"></el-input>
    </el-form-item>
    <el-form-item label="跳转权限功能值" label-width="110px" v-show="mnForm.level == ('三' || '四')" >
      <el-input  v-model="mnForm.toCode"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button   @click="resetForm('ruleForm')">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </div>
</el-dialog>
   
  </div>
</template>

<script>
// 表单校验规则定义
// 名称
const validateName = (rule,value,callback)=>{
  if(value){
    callback()
  }else{
    callback(new Error('名称必须输入哦'))
  }
}
// 功能权限值
const validateCode = (rule,value,callback)=>{
  if(value){
    callback()
  }else{
    callback(new Error('功能权限值必须输入'))
  }
}
  export default {
    name:'Menu',
    data() {
      return {
        // 树形表格数据
        tableData: [ 
         {
          id: 1,
          name: '全部数据',
          code: '',
          toCode: ' ',
          children: [{
              id: 21,
              name: '2016-05-01',
              code: '王小虎',
              toCode: '上海市普陀区金沙江路 1519 弄',
              children:[{
                id:31,
                name: '2016-05-01',
                code: '王小虎',
                toCode: '上海市普陀区金沙江路 1519 弄',
              }]
            }, {
              id: 22,
              name: '2016-05-01',
              code: '王小虎',
              toCode: '上海市普陀区金沙江路 1519 弄'
          }]
        }
        ],
        dialogFormVisible:false,         //dialog对话框的显示与隐藏
        mnForm:{                         //对话框收集数据
          level:'',                       //当前要添加的级别
          fartherTitle:'',               //父级名称 一级不显示
          name:'',                        //名称
          code:'',                       //功能权限值
          toCode:'',                     //跳转权限功能值
        },
        rules:{                           //表单的验证规则
          name:[{validator: validateName, trigger: 'blur', required: true}],
          code:[{validator: validateCode, trigger: 'blur', required: true}]
        },
        addOrUpdateInfo:{
            "children": [
              {}
            ],
            "code": "",
            "deleted": false,
            "gmtCreate": "",
            "gmtModified": "",
            "id": "",
            "level": 0,
            "name": "",
            "pid": "",
            "select": true,
            "status": 0,
            "toCode": "",
            "type": 0
          }
        
      }
    },
    methods:{
      // 获取菜单列表数据
     async getMenuData(){
        const result = await this.$ajax.menu.reqGetMenu()
        if(result.code == 20000){
          this.tableData = result.data.children
        }else{
          this.$message.warning(result.message)
        }
      },
      // 点击添加按钮
      handleAdd(row){
        this.dialogFormVisible  = true
        
        console.log(row)
        // 将level  小写的改成大写
        switch (row.level) {
          case 1:
            this.mnForm.level = '一'
            break;
          case 2:
            this.mnForm.level = '二'
            break;
          case 3:
            this.mnForm.level = '三'
            break;
          case 4:
            this.mnForm.level = '四'
            break;
          case 5:
            this.mnForm.level = '五'
            break;
          case 6:
            this.mnForm.level = '六'
            break;
        
          default:
            this.mnForm.level = '七'
            break;
        }
        this.mnForm.fartherTitle = row.name
      },
      // 提交表单验证
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message.success('提交成功')
            this.dialogFormVisible = false
          } else {
            
            return false;
          }
        });
      },
      // 点击取消重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.dialogFormVisible = false
      }
    },



    mounted(){
      // 获取菜单列表数据
      this.getMenuData()
    }
  }
</script>

<style lang="less" scoped>
  
</style>